<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-title" content="足彩"/>
    <title></title>
    <!--font-awsome-css-->
    <link rel="stylesheet" href="../public/styles/font-awesome.min.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../public/styles/bootstrap.min.css">
    <!--custom css-->
    <link rel="stylesheet" href="../public/styles/jquery-ui.css"/>
    <!-- 日期选择 -->
    <link rel="stylesheet" href="../public/styles/bootstrap-datepicker.min.css"/>

    <link rel="stylesheet" type="text/css" href="../public/styles/index.css"/>
    <link rel="stylesheet" href="../public/styles/common.css">


</head>
<body>
<div class="masthead pdng-stn1">
    <!-- 内容开始 -->
    <div class="phone-box wrap push">
        <div id="home" class="menu-notify setting-head" style="position: fixed;top: 0;width: 100%;height: 48px">
            <div class="profile-left">
                <a href="javascript:history.go(-1);" class="menu-link"><i class="fa fa-chevron-left"></i></a>
            </div>
            <div class="Profile-mid logo">
                <h1>
                    <span class="link">Setting Edit</span>
                </h1>
            </div>
            <div class="Profile-right w80">
                <a href="javascript:;" class="bets-btn inline-btn" id="settingSave">Save</a>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="usercenter" style="margin-top: 48px">
            <div class="setting-edit" id="res-setEdit"></div>
            <script type="text/template" charset="utf-8" id="tpl-setEdit">
                <form method="get">
                    <div class="form-group">
                        <div class="line-wrap overhide">
                            <label for="">Title</label>
                            <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="title">
                                    Mr
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="title-list" style="width: 160px">
                                    <li><span style="color: #333333;padding-left: 14px;padding-right: 160px"
                                              data-sex="0"
                                              onclick="$('#title').text('Mr'); $('#dropdownMenu1').text('Mr');"
                                    >Mr</span></li>
                                    <li><span style="color: #333333;padding-left: 14px;padding-right: 160px"
                                              data-sex="1"
                                              onclick=" $('#title').text('Mrs');$('#dropdownMenu1').text('Mrs');"
                                    >Mrs</span></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="line-wrap">
                            <label for="">First Name</label><input type="text" class="form-control border-t"
                                                                   name="userName" value="{{= it.userName}}">
                        </div>
                        <div class="line-wrap">
                            <label for="">Surname</label><input type="text" class="form-control border-m" name="surName"
                                                                value="{{= it.surName}}">
                        </div>
                        <div class="line-wrap">
                            <label for="">ID Number</label><input type="text" class="form-control border-b"
                                                                  name="userIdNumber" value="{{= it.userIdNumber}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="line-wrap">
                            <label for="">Email</label><input type="text" class="form-control border-t" name="userEMail"
                                                              value="{{= it.userEMail}}">
                        </div>
                        <div class="line-wrap">
                            <label for="">Tel Number</label><span class="area-code">+254</span><input type="text"
                                                                                                      class="form-control border-b area-input"
                                                                                                      readonly
                                                                                                      name="userPhone"
                                                                                                      value="{{= it.userPhone}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="line-wrap">
                            <label for="">Address1</label><input type="text" class="form-control border-t"
                                                                 name="userAddress1" value="{{= it.userAddress1}}">
                        </div>
                        <div class="line-wrap">
                            <label for="">Address2</label><input type="text" class="form-control border-m"
                                                                 name="userAddress2" value="{{= it.userAddress2}}">
                        </div>
                        <div class="line-wrap">
                            <label for="">Town/City</label><input type="text" class="form-control border-b"
                                                                  name="userCity" value="{{= it.userCity}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="line-wrap">
                            <label for="">Province</label><input type="text" class="form-control" name="userProvince"
                                                                 value="{{= it.userProvince}}">
                        </div>
                    </div>
                </form>
            </script>
        </div>
    </div>
</div>


<script type="text/javascript" src="../public/scripts/vendor/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/jquery.cookie.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/doT.min.js"></script>
<!-- 时间插件 -->
<script type="text/javascript" src="../public/scripts/vendor/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="../public/scripts/common.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'get',
            url: apiDomain + '/user/findUserInfo?' + new Date().getTime(),
            dataType: "json",
            cache: false,
            data: {userId: $.cookie('userId')},
            success: function (data) {
                if (data.code == "0") {
                    var tpl = doT.template($("#tpl-setEdit").html());
                    $("#res-setEdit").html(tpl(data.results));
                    if (data.results.sex == 1) {
                        $('#title').text('Mr');
                        $('#dropdownMenu1').text('Mrs');
                    }
                    else {
                        $('#title').text('Mr');
                        $('#dropdownMenu1').text('Mr');
                    }
                } else {
                }
            }
        })

        //            $('#title-list a').on('click', function(){
        //                var text = $(this).html(),
        //                    title = $(this).attr('data-sex');
        //                $('#title').html(text);
        //                $('input[name="sex"]').val(title);
        //            })

        $('#settingSave').on('click', function () {
            var sex = 0;
            if ($("#dropdownMenu1").html() == 'Mr') {
                sex = 0;
            } else {
                sex = 1;
            }
            $.ajax({
                type: 'get',
                url: apiDomain + '/user/updateUserInfos?' + new Date().getTime(),
                dataType: "json",
                cache: false,
                data: {
                    userId: $.cookie('userId'),
                    sex: sex,
                    userName: $('input[name="userName"]').val(),
                    surName: $('input[name="surName"]').val(),
                    userIdNumber: $('input[name="userIdNumber"]').val(),
                    userEMail: $('input[name="userEMail"]').val(),
                    userPhone: $('input[name="userPhone"]').val(),
                    userAddress1: $('input[name="userAddress1"]').val(),
                    userAddress2: $('input[name="userAddress2"]').val(),
                    userCity: $('input[name="userCity"]').val(),
                    userProvince: $('input[name="userProvince"]').val()
                },
                success: function (data) {
                    if (data.code == "0") {
                        $.blt('SUCCESS', function () {
                            window.history.go(-1);
                            return;
                        })
                    } else {
                        $.blt(data.msg);
                    }
                }
            })
        })
    })
    ;

</script>
</body>
</html>